<template>
    <el-button type="primary" >
            添加自评
          </el-button>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="ID" label="ID" width="70"></el-table-column>
      <el-table-column prop="commodity" label="商品图片" width="180" :transform="true">
        <template v-slot="scope">
          <el-image
            :z-index="2900000"
            :src="scope.row.commodity.url"
            :preview-src-list="scope.row.commodity.srcList"
            preview-teleported
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="用户名称" width="180"></el-table-column>
      <el-table-column prop="Score" label="评分" width="180"></el-table-column>
      <el-table-column prop="Reply" label="回复内容" width="180">

      </el-table-column>
      <el-table-column prop="Time" label="评价时间" width="180"></el-table-column>
      <el-table-column label="操作" width="180">
        <template v-slot="scope">
          <el-button type="primary" :disabled="dialogFormVisible" @click="handleAdd(scope.row)">
            添加回复内容
          </el-button>
      <el-button type="danger" @click="handleDelete(scope.$index)">
        删除评论
      </el-button>
    </template>
  </el-table-column>
    </el-table>
    <!-- 添加回复内容对话框 -->
    <el-dialog v-model="dialogFormVisible" title="添加回复内容">
      <el-form :model="form">
        <el-form-item label="回复内容">
          <el-input v-model="form.Reply"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="addEvaluation()">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 分页组件的调用 -->
    <el-pagination
      background
      layout="total,prev,pager,next"
      :total="tableData.length"
      :page-size="pageSize"
      v-model:current-page="currentPage"
    />
  </template>
  <script>
  import appraiseData from '@/api/appraise';
  export default {
    data() {
      return {
        tableData: [],
        currentPage: 1,
        pageSize: 10,
        dialogFormVisible: false,
        form: {
          Reply: '',
        },
        bigId: ''
      };
    },
    beforeMount() {
      this.fetchData();
    },
    methods: {
      async fetchData() {
        try {
          const data = await Promise.resolve(appraiseData);
          this.tableData = data;
        } catch (error) {
          console.error(error);
        }
      },
      handleDelete(index) {
        this.tableData.splice(index, 1);
      },
      handleAdd(row) {
        this.dialogFormVisible = true;
        this.form = { Reply: row.Reply };
        // console.log(this.tableData)
        this.bigId = row.ID
      },
      addEvaluation() {
        // const index = (this.currentPage - 1) * this.pageSize;
        // const selectedRow = this.tableData[this.currentPage * this.pageSize - (this.pageSize - index)];
        const selectedRow = this.tableData[this.bigId]
        // 更新选中行的回复内容
        selectedRow.Reply = this.form.Reply;
        // 清空表单
        this.form.Reply = '';
        // 关闭对话
        this.dialogFormVisible = false;
        },
        },
        };
    </script>
 <style scoped lang="scss">
  .demo-image__preview {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .button {
  background-color: #ff7f50;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

.button:hover {
  background-color: #ff6347;
}

  /* 设置表头样式 */
  .el-table__header th {
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    background-color: #008080;
    color: #FFFFFF;
    border-top: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
  }
  
  /* 设置表格行样式 */
  .el-table__row {
    font-size: 16px;
    background-color: #F0F8FF;
    color: #000000;
    border-bottom: 1px solid #CCCCCC;
  }
  
  /* 设置操作按钮样式 */
  .el-button--primary {
    background-color: #008080;
    border-color: #008080;
  }
  
  /* 设置分页组件样式 */
  .el-pagination {
    margin-top: 20px;
    text-align: right;
  }
</style>

  